<template>
  <div class="home-container">
    <!-- 导航栏 搜索按钮-->
    <van-nav-bar class="app-nav-bar">
      <van-button
        type="info"
        slot="title"
        class="search-btn"
        icon="search"
        round
        size="small"
        to="/search"
        >搜索</van-button
      >
    </van-nav-bar>
    <!-- 导航栏 搜索按钮-->

    <!-- 频道列表 -->
    <van-tabs>
      <van-tab
        v-for="channel in channelList"
        :title="channel.name"
        :key="channel.id"
      >
        <!-- 文章列表 -->
        <article-list :channel="channel" />
        <!-- 文章列表 -->
      </van-tab>
    </van-tabs>
    <!-- 频道列表 -->
  </div>
</template>

<script>
import ArticleList from "./components/article-list";
import ChannelEdit from "./components/channel-edit";

//导入接口
import { getUserChannels } from "@/api/user";

export default {
  name: "homeIndex",
  components: {
    ArticleList,
    ChannelEdit
  },
  props: {},
  data() {
    return {
      searchValue: "",
      channelList: null,
      channel: {}
    };
  },
  computed: {},
  watch: {},
  created() {
    this.loadChannels();
  },
  mounted() {},
  methods: {
    goSearch() {
     
    },
    //渲染频道列表
    async loadChannels() {
      let { data } = await getUserChannels();
      this.channelList = data.data.channels;
      // console.log(this.channelList);
    },
    //点击不同的频道要展示不同的内容
    changeChannel(id, name) {
      this.channel = {
        id: id,
        name: name
      };
      console.log(this.channel);
    }
  }
};
</script>

<style scoped lang="less">
.home-container {
  /deep/ .van-nav-bar__title {
    max-width: none;
  }
  .search-btn {
    width: 556px;
    height: 66px;
    background: #5babfb;
    border: none;

    .vant-icon {
      font-size: 16px;
    }
    .vant-button__text {
      font-size: 14px;
    }
  }
  .van-tabs__nav {
    padding: 0;
  }
}
</style>